<template>
  <div class="main">
    <div class="title">
      <div class="titleBlock"></div>
      <div class="titleText">报告详情</div>
    </div>
    <div class="card1">
      <div class="card1Title">体检人信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="姓名">
              <el-input v-model="form.patients_name" disabled />
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="form.patients_id_number" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="性别">
              <el-input v-model="form.patiens_sex" disabled />
            </el-form-item>
            <el-form-item label="套餐名称">
              <el-input v-model="form.packageName" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="年龄">
              <el-input v-model="form.patients_age" disabled />
            </el-form-item>
            <el-form-item label="报告时间">
              <el-input v-model="form.report_time" disabled />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="card1">
      <div class="card1Title">报告详情</div>
      <div class="card1Section">
        <div class="card2Table">
          <div class="card2TableTitle">
            <span class="projectName"
              >项目名称:<span class="projectDesc">常规检查</span></span
            >
            <span class="projectName"
              >项目编号:<span class="projectDesc">20900001</span></span
            >
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ background: '#F4F4F4' }"
            :row-style="{ height: '70px' }"
            :header-row-style="{ height: '50px' }"
          >
            <el-table-column prop="projectName" label="项目名称" />
            <el-table-column prop="checkResult" label="检查结果" />
            <el-table-column prop="reference" label="参考值" />
          </el-table>
        </div>
        <div class="card2Table">
          <div class="card2TableTitle">
            <span class="projectName"
              >项目名称:<span class="projectDesc">常规检查</span></span
            >
            <span class="projectName"
              >项目编号:<span class="projectDesc">20900001</span></span
            >
          </div>
          <el-table
            :data="tableData2"
            style="width: 100%"
            :header-cell-style="{ background: '#F4F4F4' }"
            :row-style="{ height: '70px' }"
            :header-row-style="{ height: '50px' }"
          >
            <el-table-column prop="projectName2" label="项目名称" width="180" />
            <el-table-column prop="checkResult2" label="检查结果" width="180" />
            <el-table-column prop="reference2" label="参考值" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRoute } from "vue-router";
export default {
  props: {},
  setup() {
    const data = reactive({
      form: {
        patients_name: "",
        patients_id_number: "",
        patiens_sex: "",
        packageName: "",
        patients_age: "",
        report_time: "",
      },
      tableData: [
        {
          projectName: "身高",
          checkResult: "175cm",
          reference: "",
        },
        {
          projectName: "体重",
          checkResult: "65kg",
          reference: "",
        },
        {
          projectName: "BMI",
          checkResult: "19.0",
          reference: "18.5-22.9",
        },
      ],
      tableData2: [
        {
          projectName2: "血红蛋白",
          checkResult2: "300g/L",
          reference2: "参考范围：115-150g/L",
        },
        {
          projectName2: "血红蛋白",
          checkResult2: "300g/L",
          reference2: "参考范围：115-150g/L",
        },
        {
          projectName2: "血红蛋白",
          checkResult2: "300g/L",
          reference2: "参考范围：115-150g/L",
        },
        {
          projectName2: "血红蛋白",
          checkResult2: "300g/L",
          reference2: "参考范围：115-150g/L",
        },
        {
          projectName2: "血红蛋白",
          checkResult2: "300g/L",
          reference2: "参考范围：115-150g/L",
        },
        {
          projectName2: "血红蛋白",
          checkResult2: "300g/L",
          reference2: "参考范围：115-150g/L",
        },
      ],
    });
    const route = useRoute();
    // console.log(route.params);
    data.form = route.params;
    return { ...toRefs(data) };
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 30px;
  box-sizing: border-box;
  .titleBlock {
    width: 50px;
    height: 13px;
    background-color: #006eff;
    border-radius: 20px;
  }
  .titleText {
    font-size: 30px;
    margin-left: 20px;
  }
}
.card1 {
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  width: 100%;
  margin-bottom: 30px;
  .card1Title {
    padding: 20px;
    box-sizing: border-box;
    color: #006eff;
    background-color: #f2f2f2;
  }
  .card1Section {
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    padding: 40px 0;
    box-sizing: border-box;
    .form1 {
      width: 30%;
    }
    .card2Table {
      // box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
      width: 45%;
      .card2TableTitle {
        padding: 0 20px 20px 0;
        box-sizing: border-box;
        .projectName {
          color: rgba(167, 162, 162, 0.776);
          font-size: 14px;
          .projectDesc {
            color: black;
            font-size: 16px;
            padding-right: 30px;
            padding-left: 10px;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}
</style>